<template>
  <Tabs class="container" value="list">
    <Tab-pane label="厂家管理" name="list">
      <div class="tool-wrap">
        <Button-group class="rf">
          <i-button type="ghost" icon="plus" class="tool-btn" @click="showModal()">
            增加厂家
          </i-button>
          <i-button type="ghost" icon="trash-a" class="tool-btn" @click="deleteList">批量删除厂家</i-button>
        </Button-group>
      </div>
      <Table :columns="columns" :data="manufacturerList" @on-selection-change="checkChange">

      </Table>
    </Tab-pane>
    <Modal
      class-name="vertical-center-modal"
      v-model="modal.show"
      :title="modal.title">
      <Form  ref="modalForm" :model="modal.formData" :rules="modal.rules"  :label-width="100">
        <Form-item label="厂家名" prop="name">
          <i-input v-model="modal.formData.name" placeholder="请输入厂家名"></i-input>
        </Form-item>
        <Form-item label="描述" prop="describe">
          <i-input v-model="modal.formData.describe" placeholder="请输入厂家描述"></i-input>
        </Form-item>
      </Form>
      <div slot="footer" class="cf modal-footer">
        <i-button class="rf" :loading="modal.loading" type="primary" @click="save()">保存</i-button>
        <i-button class="rf" @click="closeModal()" style="margin-right: 30px;">取消</i-button>
      </div>
    </Modal>
  </Tabs>
</template>
<script type="text/ecmascript-6">
  import manufacturer from '../../../api/admin/manufacturer'
  const emptyData = {id: 0, name: '', describe: ''}
  export default{
    components: {},
    props: [],
    data () {
      const rules = this.$rules
      return {
        columns: [
          {
            type: 'selection',
            width: 62,
            align: 'center'
          },
          {
            title: '厂家名',
            key: 'name'
          },
          {
            title: '描述',
            key: 'describe'
          },
          {
            title: '操作',
            className: 'option-column',
            render: this.optionRender
          }
        ],
        manufacturerList: [],
        checkedList: [],
        modal: {
          show: false,
          loading: false,
          title: '增加厂家',
          formData: {...emptyData},
          rules: {
            name: [rules.required, rules.max_60],
            describe: [rules.max_200]
          }
        }
      }
    },
    methods: {
      optionRender (h, params) {
        let self = this
        return h('div', [
          h('Tooltip', {
            props: {
              content: '编辑',
              placement: 'top'
            }
          }, [
            h('Button', {
              props: {
                type: 'text',
                icon: 'edit'
              },
              on: {
                click: () => {
                  self.showModal(params.row)
                }
              }
            })
          ]),
          h('Tooltip', {
            props: {
              content: '删除',
              placement: 'top'
            }
          }, [
            h('Button', {
              props: {
                type: 'text',
                icon: 'trash-a'
              },
              on: {
                click: () => {
                  self.delete(params.row)
                }
              }
            })
          ])
        ])
      },
      showModal (row) {
        const self = this
        self.modal.formData = {...emptyData}
        if (row) {
          Object.assign(self.modal.formData, row)
          self.modal.title = '编辑厂家'
        }
        self.modal.show = true
      },
      closeModal () {
        this.modal.show = false
      },
      checkChange (rows) {
        this.checkedList = rows
      },
      getManufacturerList () {
        const self = this
        manufacturer.getManufacturerList(data => {
          self.manufacturerList = data
        })
      },
      save () {
        const self = this
        self.modal.loading = true
        self.$refs.modalForm.validate(valid => {
          if (!valid) {
            self.modal.loading = false
            return
          }
          manufacturer.saveManufacturer(self.modal.formData, res => {
            self.getManufacturerList()
            self.$Message.success('保存成功')
            self.modal.loading = false
            self.modal.show = false
          }, () => {
            self.modal.loading = false
          })
        })
      },
      delete (row) {
        const self = this
        manufacturer.deleteManufacturer(row.id, res => {
          self.getManufacturerList()
        })
      },
      deleteList () {
        const self = this
        if (self.checkedList.length === 0) {
          self.$Message.warning('请选择厂家')
          return
        }
        let ids = []
        self.checkedList.forEach(item => {
          ids.push(item.id)
        })
        manufacturer.deleteManufacturerList(ids, res => {
          self.getManufacturerList()
        })
      }
    },
    created () {
      this.getManufacturerList()
    }
  }
</script>
<style lang="less">
</style>
